<template>
  <div class="login">
    <div class="card" style="padding-top: 4%">
      <div class="header">
        <div style="display:flex">
          <div class="logos"></div>
          <div style="display:flex;flex-direction: column;">
            <div class="stitle" style="padding-top:10px">融创大健康Al中医药膳系统</div>
            <div class="" style="color:#666;margin-left:22px;margin-top:-12px">Rong Chuang Big Health Al TCM Tonic Diet system</div>
          </div>
        </div>
        <div class="btn" @click="go">返回主页</div>
      </div>
    </div>
    <div class="card" style="padding-top: 5%">
      <div class="flex">
        <div
          style="width: 65%; background: #fff; border-radius: 20px; padding: 10px 10px"
        >
          <div class="flexs">
            <div style="width: 60%" class="flexsc">
              <div>
                <el-image
                  style="
                    width: 200px;
                    height: 150px;
                    border-radius: 20px;
                    margin-top: 20px;
                  "
                  :src="data.cur.healthType"
                  fit="fill"
                  :preview-src-list="[data.cur.healthType]"
                />
              </div>
              <div class="stitle" style="margin-top: 20px; font-size: 28px">
                {{ data.cur.diet }}
              </div>
            </div>
            <div style="flex: 1; font-size: 20px; color: #6c6c6c; line-height: 35px">
              <div class="stitle" style="font-size: 26px; padding: 10px 0">
                药膳功效：
              </div>
              <!-- <div
                style="
                  letter-spacing: 3px;
                  font-size: 16px;
                  color: #6c6c6c;
                  line-height: 30px;
                "
                v-html="data.cur.dietContent"
              ></div> -->
              <div style="font-size: 14px; line-height: 25px">
                {{ data.cur.dietEffect }}
              </div>
            </div>
          </div>
        </div>
        <div class="search">
          <div class="stitle">健康状况</div>
          <div style="color: #888; font-size: 16px; margin-top: 15px">
            姓名：{{ data.current.personName }}
          </div>
          <div style="color: #888; font-size: 16px; margin-top: 15px">
            联系电话：{{ data.current.personPhone }}
          </div>
          <div style="color: #888; font-size: 16px; margin-top: 15px">
            健康状况： {{ data.current.constitutionNames }}
          </div>
          <div style="color: #888; font-size: 16px; margin-top: 15px">
            报告时间：{{ data.current.checkTime }}
          </div>
          <!-- <div style="color: #888; font-size: 16px; margin-top: 15px">
            二维码：
          </div> -->
          <!-- <div class="flexsJustify" style="margin-top: 20px">
            <div>时间</div>
            <div>健康状态</div>
          </div> -->
          <div
            class="flexsJustify"
            style="margin-top: 20px"
            v-for="(item, index) in data.list"
            :key="index"
            @click="oncuechange(item)"
          >
            <div>{{ item.checkTime }}</div>
            <div>{{ item.constitutionNames }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="el-login-footer">
      <span>Copyright © 2018-2025 山西融创康养科技有限公司.</span>
    </div>
  </div>
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import { listTongue } from "@/api/tongue";
import { listDiet } from "@/api/diet";

export default {
  setup() {
    const searchClick = () => {};
    // const searchClick = () = {

    // };
    const data = reactive({
      queryParams: {
        page: 1,
        size: 1000,
        order: "desc",
        sort: "a.completeTime",
        queryGroup1: [
          {
            connector: "blank",
            name: "a.checkPersonName",
            type: "String",
            operator: "LK",
            value: "",
          },
        ],
      },
      list: [],
      current: {},
      currDetail: {},
      cur: {},
      str: {},
    });
    const go = () => {
      router.push({
        path: "/index",
      });
    };
    const route = useRoute();
    const router = useRouter();
    console.log(route.query.name, "----------------------------");

    const oncuechange = (items) => {
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      data.currDetail.find((item) => {
        if (item.dietName == items.constitutionNames) {
          data.cur = item;
        }
      });
      loading.close();
    };
    const down = (url) => {
      // const fileUrl = url; // 文件的URL地址
      //   window.open(fileUrl);
      const fileUrl = url; // 文件的URL地址
      const fileName = new Date();
      fetch(fileUrl)
        .then((response) => response.blob())
        .then((blob) => {
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", fileName);
          document.body.appendChild(link);
          link.click();
        })
        .catch((error) => {
          console.error(error);
        });
    };
    onMounted(async () => {
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let queryParams = {
        pageNum: 1,
        pageSize: 1000,
      };
      let currDetail = await listDiet(queryParams);
      data.currDetail = currDetail.rows;
      // console.log(data.currDetail,'data.currDetail');
      // data.queryParams.queryGroup1[0].value = route.query.name;
      // let res = await listTongue(data.queryParams);
      // let obj = JSON.parse(res.Response);
      // data.list = obj.data.page.rows;
      // console.log(data.list,'data.list')
      // data.current = obj.data.page.rows[0];
      // console.log(data.list, "---------------------------12312");
      data.current = JSON.parse(route.query.name);
      data.currDetail.find((item) => {
        if (item.dietName == data.current.constitutionNames) {
          data.cur = item;
        }
      });
      loading.close();

      //   listTongue();
      // JSON.parse(route.query.name)
    });
    return {
      searchClick,
      data,
      go,
      oncuechange,
      down,
    };
  },
};
</script>

<style scoped lang="scss">
.el-login-footer {
  position: fixed;
  bottom: 20px;
  width: 100%;
  text-align: center;
  // color: #fff;
  font-family: Arial, serif;
  font-size: 12px;
  letter-spacing: 1px;
}
.login {
  background-image: url("../assets/images/banner.jpg");
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%; // 修改为contain，图片按比例缩放以适应容器，不裁剪
  background-position: center;
  background-repeat: no-repeat;
}
.logos {
  background-image: url("../assets/images/logo.png");
  width: 70px;
  height: 70px;
  background-size: 100% 100%; // 修改为contain，图片按比例缩放以适应容器，不裁剪
  background-position: center;
  background-repeat: no-repeat;
  
}
.card {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 100px;
}
.header {
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn {
  background: rgb(208, 165, 34);
  padding: 10px 25px;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  border-radius: 10px;
}
.flex {
  display: flex;
  justify-content: space-between;
  width: 80%;
}

.carousel-item {
  color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  display: flex;
  align-items: center;
  margin: 0;
  text-align: center;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.back {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
.swiper-slide {
  background: #fff;
  height: 500px;
  border-radius: 20px;
}
.gong {
  font-size: 26px;
  font-weight: bold;
  color: rgb(108, 108, 108);
  margin-top: 15px;
}
.title {
  font-size: 26px;
  font-weight: bold;
  color: rgb(108, 108, 108);
  margin-top: 15px;
}
.cards {
  font-size: 20px;
  color: #888;
  margin-top: 15px;
}
.search {
  background: #fff;
  border-radius: 20px;
  // width: 25%;
  flex: 1;
  margin: 0px 20px;
}
.stitle {
  font-size: 34px;
  padding: 10px 20px;
  color: rgb(208, 165, 34);
  font-weight: bold;
  letter-spacing: 5px;
}
.searchBtn {
  background: rgb(208, 165, 32);
  width: 150px;
  height: 150px;
  padding: 40px 40px;
  font-size: 32px;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flexs {
  display: flex;
  justify-content: center;
}
.flexsc {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.flexsJustify {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
